<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>教师信息列表</title>
<link href="layui/css/layui.css" rel="stylesheet"
	type="text/css" />
<script src="layui/layui.js"></script>
</head>
<body>
	<!-- 表单搜素 -->
	<div class="layui-form-item">
		<div class="layui-inline">
			<label class="layui-form-label">教师卡号</label>
			<div class="layui-input-inline" style="width: 100px;">
				<input type="text" name="tcardNo" id="tcardNo" autocomplete="off"
					class="layui-input">
			</div>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label">姓名</label>
			<div class="layui-input-inline" style="width: 100px;">
				<input type="text" name="tname" id="tname" autocomplete="off"
					class="layui-input">
			</div>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label">性别</label>
			<div class="layui-input-inline" style="width: 100px;">
				<input type="text" name="tsex" id="tsex" autocomplete="off"
					class="layui-input">
			</div>
		</div>
		<input type="button" class="layui-btn" id="souBtn" value="搜索" />
	</div>



	<!-- 表格容器 -->
	<table id="demo" lay-filter="test"></table>


	<!-- 表格的头部工具条 -->
	<script type="text/html" id="barDemo1">
  		<a class="layui-btn layui-btn" lay-event="add">添加</a>
		<a class="layui-btn layui-btn" lay-event="daoru">批量导入</a>
		<a class="layui-btn layui-btn" lay-event="daochu">批量导出</a>
	</script>

	<!-- 表格的行内工具条 -->
	<script type="text/html" id="barDemo2">
  		<a class="layui-btn layui-btn-xs" lay-event="detail">查看与编辑</a>
  		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>


<!-- 添加的弹窗 -->
	<div id="tianjiachuang" style="display: none">
		<form class="layui-form" onsubmit="return false" id="tianjiaForm"
			lay-filter="tianjiaForm">
			<!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
			<div class="layui-form-item">
				<label class="layui-form-label">教师卡号</label>
				<div class="layui-input-inline">
					<input type="text" name="tcardNo" placeholder="请输入"
						autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">姓名</label>
				<div class="layui-input-inline">
					<input type="text" name="tname" placeholder="请输入" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">性别</label>
				<div class="layui-input-inline">
					<input type="radio" name="tsex" value="男" title="男" checked> <input
						type="radio" name="tsex" value="女" title="女" >
				</div>
			</div>
			
			<div class="layui-form-item">
				<label class="layui-form-label">科室名称</label>
				<div class="layui-input-inline">
					<select name="sectionId" lay-filter="sectionId">
						<option value="1001">1001</option>
						<option value="1002">1002</option>
					</select>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">状态</label>
				<div class="layui-input-inline">
					<input type="text" name="status" placeholder="请输入"
						autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">备注</label>
				<div class="layui-input-inline">
					<input type="text" name="remark" placeholder="请输入"
						autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
			<label class="layui-form-label"></label>
				<div class="layui-input-inline">
					<button class="layui-btn" lay-submit lay-filter="tianjiabtn">添加提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
	</div>
	
<!-- 修改的弹窗 -->
	<div id="xiugaichuang" style="display: none">
		<form class="layui-form" onsubmit="return false" id="xiugaiForm"
			lay-filter="xiugaiForm">
			<div class="layui-form-item">
				<label class="layui-form-label">教师卡号</label>
				<div class="layui-input-inline">
					<input type="text" name="tcardNo" placeholder="请输入"
						autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">姓名</label>
				<div class="layui-input-inline">
					<input type="text" name="tname" placeholder="请输入" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">性别</label>
				<div class="layui-input-inline">
					<input type="radio" name="tsex" value="男" title="男"> <input
						type="radio" name="tsex" value="女" title="女" checked>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">科室名称</label>
				<div class="layui-input-inline">
					<select name="sectionId" lay-filter="sectionId">
						<option value="1001">1001</option>
						<option value="1002">1002</option>
					</select>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">状态</label>
				<div class="layui-input-inline">
					<input type="text" name="status" placeholder="请输入"
						autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">备注</label>
				<div class="layui-input-inline">
					<input type="text" name="remark" placeholder="请输入"
						autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
			<label class="layui-form-label"></label>
				<div class="layui-input-inline">
					<button class="layui-btn" lay-submit lay-filter="xiugaibtn">修改提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
			<!--  修改的表单中，需要放一个 隐藏域，用来储存id-->
			<input type="hidden" name="tid"/>
			
		</form>
	</div>

<!-- 导入表格弹窗 -->
	<div id="uploadWindow"  title="导入Excel数据" style="display: none">
		<input type="file" id="shangchuan" name="shangchuan"> 
		<input id="uploadBtn" type="button" value="开始上传" />
	</div>

	<!-- 脚本代码部分 -->
	<script>
		layui.use([ 'form', 'layer', 'table' ], function() {
			var form = layui.form;
			var table = layui.table;
			var layer = layui.layer;
			var $ = layui.$;

			//渲染表格
			table.render({
				elem : '#demo', //指定原始表格元素选择器（推荐id选择器）
				id : 'demo',
				page : true,//开启分页
				url : 'getTeaList',
				toolbar : '#barDemo1',
				cols : [ [ //标题栏
				{
					checkbox : true
				}, {
					field : 'tid',
					title : '教师编号',
					sort: true,
					width : 120
				}, {
					field : 'tcardNo',
					title : '教师卡号',
					width : 120
				}, {
					field : 'tname',
					title : '姓名',
					width : 120
				}, {
					field : 'tsex',
					title : '性别',
					width : 120
				},{
					field : 'secname',
					title : '科室名称',
					width : 120
				},{
					field : 'status',
					title : '状态',
					width : 120
				},{
					field : 'remark',
					title : '备注',
					width : 120
				}, {
					toolbar : '#barDemo2',
					title : '操作'
				} ] ]
			});
			//渲染表格--end

			//搜索按钮的单击事件
			$("#souBtn").click(function() {
				//判断 区间的数据合理性
				if($("#min").val()>$("#max").val()){
					alert("最高值不得高于起始值");
					return ;  //结束函数，下面的重载不会再执行
				}
				
				
				//表格重载
				table.reload('demo', {
					where : {
						tcardNo : $("#tcardNo").val(),
						tname : $("#tname").val(),
						tsex : $("#tsex").val(),
						min : $("#min").val(),
						max : $("#max").val()
					}
				});
			});
			//搜索按钮的单击事件-end

			//监听头部工具条
			table.on('toolbar(test)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
				var layEvent = obj.event; //获得 lay-event 对应的值
				if (layEvent === 'add') { //添加
					//弹窗
					layer.open({
						type : 1,
						area : [ '800px', '600px' ],
						content : $('#tianjiachuang')
					});
				}else if (layEvent === 'daoru') { //导入
					//弹窗
					layer.open({
						type : 1,
						area : [ '800px', '600px' ],
						content : $('#uploadWindow')
					});
				} else if (layEvent === 'daochu') { //导出
					var checkStatus = table.checkStatus('demo'); //demo 即为基础参数 id 对应的值
					console.log(checkStatus.data) //获取选中行的数据
					var ids = [];
					$(checkStatus.data).each(function(i, o) {
						ids.push(o.tid);
					});
					if (ids.length < 1) {
						layer.confirm("未选中数据，您确定要导出所有的数据吗？", function(index) {
							window.location.href = "teaexcel/exportTea?ids=" + ids;
							layer.msg("导出成功", {
								time : 1000,
								icon : 1
							})
							layer.close(index);
						})
					} else {
						ids = ids.join(",");
						layer.confirm("您确定要导出选中的数据么？", function(index) {
							window.location.href = "teaexcel/exportTea?ids=" + ids;
							layer.msg("导出成功", {
								time : 1000,
								icon : 1
							})
							layer.close(index);
						})
					}

				}
			});
			//监听头部工具条--end

			//监听行内工具条
			table.on('tool(test)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
				var data = obj.data; //获得当前行数据
				var layEvent = obj.event; //获得 lay-event 对应的值
				var tr = obj.tr; //获得当前行 tr 的DOM对象

				if (layEvent === 'detail') { //查看
					console.log(data)
					//数据展示在表单中
					form.val('xiugaiForm',data);
					//弹窗
					layer.open({
						type : 1,
						area : [ '800px', '600px' ],
						content : $('#xiugaichuang')
					});
					
				} else if (layEvent === 'del') { //删除
					layer.confirm('真的删除行么', function(index) {
						obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
						layer.close(index);
						//向服务端发送删除指令
						var url = "delTea";
						$.post(url,{tid:data.tid},function(res){
							layer.alert(res.msg,function(){
								layer.closeAll(); //关闭所有的窗口
								table.reload('demo', {}); //表格重载
							});
						},"json");
					});
				} 
			});
			//监听行内工具条---end

			//添加提交的 监听
			form.on('submit(tianjiabtn)', function(data) {
				$.post("addTea",data.field,function(res){
					if(res.code!=1){
						layer.alert("添加成功",function(){
							layer.closeAll(); //关闭所有的窗口
							table.reload('demo', {}); //表格重载
						});
					}
				},"json");
				
				return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
			});
			//添加提交的 监听---end

			//修改提交的监听
			form.on('submit(xiugaibtn)', function(data) {
				var url = "updateTea";
				$.post(url,data.field,function(res){
					layer.alert(res.msg,function(){
						layer.closeAll(); //关闭所有的窗口
						table.reload('demo', {}); //表格重载
					});
				},"json");
				
				return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
			});
			//修改提交的监听--end

			//文件导入 按钮单击时执行
			$("#uploadBtn").click(function(){
				var formData = new FormData();//表单数据对象				
				formData.append("file", $("#shangchuan").prop('files')[0] );//文件				
				$.ajax({
					url: "teaexcel/uploadTea",
					type: 'POST',
					data: formData,
					dataType:'json',
					// 告诉jQuery不要去处理发送的数据
					processData: false,
					// 告诉jQuery不要去设置Content-Type请求头
					contentType: false,
					beforeSend: function() {
						console.log("正在拼命上传文件，请稍候...");
					},
					success: function(result) {
						console.log(result);
						if(result.data){
							layer.closeAll(); //关闭所有的窗口
							table.reload('demo', {}); //表格重载
						}else{
						}
					}
				});
			})
			
			
			//html异步请求获取关联的外键表并渲染
			$.post("getSecList",function(res){
					if(res.data){
						$("[name=sectionId]").empty();//清空下拉框
		                $("[name=sectionId]").append("<option value=''>--请选择--</option>");
		                for(var i=0;i<res.data.length;i++){
		                    var item=res.data[i];
		                    $("[name=sectionId]").append("<option value="+item.secid+">"+item.secname+"</option>");
		                }
		                //重新渲染select
		                form.render('select');
					}
				})
		
				
				
				
				
				
		});
	</script>








</body>
</html>